<template>
	<Typed class="typedClass" :options="options">
		<div class="typing"></div>
	</Typed>
</template>

<script setup>
import { Typed } from '@duskmoon/vue3-typed-js';
import { reactive, toRefs, watch, watchEffect } from 'vue';
const props = defineProps({
	msg: {
		type: String,
		default: '这个人很懒...',
	},
});
let { msg } = toRefs(props);
const msgArr = ref([]);
if (msg.value === null || !msg.value) {
	msg.value = '您尚未登录...';
}
for (let i = 0; i < msg.value.length; i += 5) {
	msgArr.value.push(msg.value.substring(i, i + 5));
}

const options = ref({
	strings: msgArr,
	// 是否循环
	loop: true,
	// 打字速度
	typeSpeed: 50,
	// 回退速度
	backSpeed: 20,
});

watchEffect(msg, () => {
	msgArr.value = [];
	for (let i = 0; i < msg.value.length; i += 5) {
		msgArr.value.push(msg.value.substring(i, i + 5));
	}
	options.value = {
		strings: msgArr,
		// 是否循环
		loop: true,
		// 打字速度
		typeSpeed: 50,
		// 回退速度
		backSpeed: 20,
	};
});
</script>

<style scoped>
.typedClass {
	display: flex;
	justify-content: center;
	margin-top: 3vh;
	font-size: 12px;
}
</style>
